var React = require('react');
var AppView = require('../common/component/view/app-view.node');
var CustomIcon = require('../common/component/icon/custom-icon.node');
var NewMenuDialog = require('./dialog/new-menu-dialog.node');
var EditMenuDialog = require('./dialog/edit-menu-dialog.node');
var AssignFunctionDialog = require('./dialog/assign-function-dialog.node');
var ChooseMenuDialog = require('./dialog/choose-menu-dialog.node');

module.exports = <>
  <AppView viewTitle="${t('ui.menu.common.title.menuManagement')}">
    <link href="${appCss('static/app/menu/menu-management.css')}" rel="stylesheet" />

    <div className="x-view-layout">

      <div className="menu-left-side">
        {/* 左侧卡片 */}
        <div className="shadow bg-white rounded menu-tree-content">
          <div className="menu-tree-header">
            {/* 菜单卡片标题 */}
            <span className="font-weight-bold">{"${t('ui.menu.common.text.menuStructure')}"}</span>

            {/* 工具栏 */}
            <div className="menu-tool-bar">
              {/* 切换菜单模板 */}
              <span className="d-inline-block" tabIndex="0" data-toggle="tooltip" title="${t('ui.menu.common.msg.swapTemplate')}">
                <button data-x-ui="swapTemplateBtn" type="button" className="btn btn-outline-primary btn-sm">
                  <CustomIcon iconName="SwapOutlined" />
                </button>
              </span>
              {/* 新建菜单 */}
              <span className="d-inline-block" tabIndex="0" data-toggle="tooltip" title="${t('ui.menu.common.msg.newMenu')}">
                <button data-x-ui="newMenuBtn" type="button" className="btn btn-outline-primary btn-sm" disabled>
                  <CustomIcon iconName="PlusOutlined" />
                </button>
              </span>
            </div>
            {/* END 工具栏 */}
          </div>

          <div className="menu-tree-body">
            {/* 树形结构 */}
            <div data-x-ui="menuTree" className="menu-tree"></div>
          </div>
        </div>
        {/* END 左侧卡片 */}
      </div>

      <div className="menu-right-side">
        {/* 右侧卡片 */}
        <div className="shadow p-3 bg-white rounded">
          <span className="font-weight-bold menu-table-title">{"${t('ui.menu.common.text.childMenus')}"}</span>

          {/* 子菜单表格 */}
          <table data-x-ui="menuTable" className="x-table-custom"
            data-x-name="childMenuData" data-x-type="dataGrid">
            <thead>
              <tr>
                <th data-field="id" data-visible="false">ID</th>
                <th data-field="menuCode">{"${t('ui.menu.common.field.menuCode')}"}</th>
                <th data-field="menuName">{"${t('ui.menu.common.field.menuName')}"}</th>
                <th data-field="parentName">{"${t('ui.menu.common.field.parentName')}"}</th>
                <th data-field="menuIcon">{"${t('ui.menu.common.field.menuIcon')}"}</th>
                <th data-field="menuPath">{"${t('ui.menu.common.field.menuPath')}"}</th>
                <th data-field="menuOrder">{"${t('ui.menu.common.field.menuOrder')}"}</th>
                <th data-field="showFlagDesc">{"${t('ui.system.common.field.showFlag')}"}</th>
                <th data-field="remark">{"${t('ui.system.common.field.remark')}"}</th>
                <th>{"${t('ui.system.common.field.operate')}"}</th>
              </tr>
            </thead>
          </table>
          {/* END 子菜单表格 */}
        </div>
        {/* END 右侧卡片 */}
      </div>

    </div>

    {/* "新建菜单"对话框 */}
    <div data-x-ui="newMenuDialog" className="modal" tabIndex="-1">
      <NewMenuDialog />
    </div>

    {/* "编辑菜单"对话框 */}
    <div data-x-ui="editMenuDialog" className="modal" tabIndex="-1">
      <EditMenuDialog />
    </div>

    {/* "选择菜单"弹出框 */}
    <div data-x-ui="chooseMenuDialog" className="modal x-dialog2" tabIndex="-1">
      <ChooseMenuDialog />
    </div>

    {/* "分配功能"对话框 */}
    <div data-x-ui="assignFunctionDialog" className="modal" tabIndex="-1">
      <AssignFunctionDialog />
    </div>

    <script src="${appJs('app/common/js/table-selection-tabs.js')}" type="text/javascript"></script>
    <script src="${appJs('app/menu/common/convert-to-tree-data.js')}" type="text/javascript"></script>
    <script src="${appJs('app/menu/tree-menu-structure.js')}" type="text/javascript"></script>
    <script src="${appJs('app/menu/dialog/assign-function-dialog.js')}" type="text/javascript"></script>
    <script src="${appJs('app/menu/dialog/new-menu-dialog.js')}" type="text/javascript"></script>
    <script src="${appJs('app/menu/dialog/edit-menu-dialog.js')}" type="text/javascript"></script>
    <script src="${appJs('app/menu/menu-management.js')}" type="text/javascript"></script>
  </AppView >
</>
